<template>
  <div>
    <h1><a href="path">郑州升达经贸管理学院</a></h1>
    <hr />
    <img :src="sdimg" /><br />
    <button @click="toggleImage" class="btn btn-primary">点我切换图片</button>
    <hr />
    <p>n的值为{{ count }}</p>
    <button @click="add" class="btn btn-light">加1</button>
    <button @click="clear" class="btn btn-dark">清零</button>
    <hr />
    <table class="table table-bordered border-primary">
      <tbody>
        <tr class="table-primary">
          <td>序号</td>
          <td>名字</td>
          <td>年龄</td>
          <td>学校</td>
          <td>评价</td>
        </tr>
        <tr v-for="(item, index) in liststu" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.school }}</td>
          <td>{{ item.evaluation }}</td>
        </tr>
      </tbody>
    </table>
    <hr />
    <input type="text" v-model="msg" />
    <br />
    <button @click="showmsg" >输入框中的内容是?</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      path: "https://www.shengda.edu.cn/",
      sdimg: "https://www.shengda.edu.cn/images/logo20210607.png",
      msg: "",
      liststu: [
        { id: 1, name: "小明", age: 18, school: "光明小学", evaluation: "三好学生" },
        { id: 2, name: "小刚", age: 20, school: "复兴中学", evaluation: "优秀班干部" },
        { id: 3, name: "吉姆格林", age: 19, school: "光明小学", evaluation: "吉姆做了汽车公司经理" },
        { id: 4, name: "李雷", age: 25, school: "复兴中学", evaluation: "不老实的家伙" },
        { id: 5, name: "韩梅梅", age: 22, school: "光明小学", evaluation: "在一起" },
      ],
    });
    const add = () => state.count++;
    const clear = () => (state.count = 0);
    const showmsg = () => alert(state.msg);
    const toggleImage = () => {
      if (state.sdimg === "https://www.shengda.edu.cn/images/logo20210607.png") {
        state.sdimg = "https://www.shengda.edu.cn/images/xx20210526.png";
      } else {
        state.sdimg = "https://www.shengda.edu.cn/images/logo20210607.png";
      }
    };

    return {
      ...toRefs(state),
      add,
      clear,
      showmsg,
      toggleImage,
    };
  },
};
</script>

<style lang="scss" scoped>
button {
  margin: 10px 10px;
}
</style>
